<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pt-[12px] overflow-auto"
    >
      <el-form-item label="国家" prop="country">
        <el-select
          v-model="form.country"
          placeholder="请选择"
          filterable
          clearable
          class="!w-[150px]"
        >
          <el-option
            v-for="item in taskConfigStore.allCountryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间单位" prop="timeUnit">
        <el-select
          v-model="form.timeUnit"
          class="!w-[80px]"
          placeholder="请选择时间单位"
        >
          <el-option label="日" value="day" />
          <el-option label="周" value="week" />
          <el-option label="月" value="month" />
          <el-option label="年" value="year" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-descriptions direction="vertical" :column="4" border>
      <el-descriptions-item label="利润总额">{{
        tableData?.totalProfit ?? "--"
      }}</el-descriptions-item>
      <el-descriptions-item label="总成本">{{
        tableData?.totalCost ?? "--"
      }}</el-descriptions-item>
      <el-descriptions-item label="总销售">
        {{ tableData?.totalSales ?? "--" }}
      </el-descriptions-item>
      <el-descriptions-item label="总任务">
        {{ tableData?.totalTasks ?? "--" }}
      </el-descriptions-item>
    </el-descriptions>

    <el-table
      show-overflow-tooltip
      stripe
      border
      :data="tableData?.timeStats"
      style="width: 100%"
      class="mt-4"
    >
      <el-table-column prop="period" label="时间" />
      <el-table-column prop="profit" label="利润" />
      <el-table-column prop="cost" label="成本" />
      <el-table-column prop="sales" label="销售额" />
      <el-table-column prop="tasks" label="任务数" />
    </el-table>
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 40, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch, h } from "vue";
import { ElMessage } from "element-plus";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import { getCountryStats } from "@/api/adminProfitApi";
import { useTaskConfigHook } from "@/store/modules/taskConfig";
import dayjs from "dayjs";
const taskConfigStore = useTaskConfigHook();
const defaultTime = [
  dayjs().startOf("month").format("YYYY-MM-DD"),
  dayjs().endOf("month").format("YYYY-MM-DD")
];
const formRef = ref();
const loading = ref(false);
const form = reactive({
  country: taskConfigStore.allCountryList[0]?.id,
  timeUnit: "month",
  time: defaultTime,
  startDate: defaultTime[0],
  endDate: defaultTime[1]
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
});

const tableData = ref<any>();

watch(
  () => form.time,
  (newVal, oldVal) => {
    if (newVal) {
      form.startDate = newVal[0];
      form.endDate = newVal[1];
    } else {
      form.time = defaultTime;
      form.startDate = defaultTime[0];
      form.endDate = defaultTime[1];
    }
  }
);

async function onSearch() {
  const { country, time, ...reset } = form;
  if (!country) {
    return ElMessage.warning("请选择国家");
  }
  const params = {
    page: pagination.currentPage,
    size: pagination.pageSize,
    ...reset
  };
  const { data } = await getCountryStats(country, params);
  const { total, size, page } = data;
  tableData.value = data;
  pagination.total = total || 0;
  pagination.pageSize = size || 10;
  pagination.currentPage = page || 1;
}
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
  onSearch();
};
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  onSearch();
};
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  pagination.currentPage = 1;
  onSearch();
};
onMounted(() => {
  onSearch();
});
</script>
<style lang="scss" scoped>
.main {
  padding: 20px;
  background-color: #fff;
  .el-pagination {
    margin-top: 20px;
    justify-content: flex-end;
  }
}
.el-dropdown-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  margin-right: 10px;
}
</style>
